<template>
    <div class="menu">
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            :ellipsis="false"
            menu-trigger="click"
            style="position: fixed;top:0;z-index: 11"
        >
            <el-sub-menu index="2">
                <template #title>{{ titles[title] }}</template>
               
                <el-menu-item v-for="(   item, index   ) in    titles   " :key="index" :index="index + ''">{{ item
                }}</el-menu-item>
           
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script lang="ts">
export default {
    name: 'MyMenu',
};
</script>

<script lang="ts" setup>
import { getQueryObj } from '@/utils/common';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { onMounted, ref, watch } from 'vue';
defineProps<{ titles: string[] }>();
const emit = defineEmits(['select']);
const isShow = ref(false);
const clickFn = () => {
    const menu: any = document.querySelector('.el-sub-menu__title');
    var event = new Event('click');
    menu.dispatchEvent(event);
    //isShow.value = !isShow.value;
    // if (['1', '4'].includes(title.value)) {
    //     document.documentElement.style.setProperty('--martop', '60px');
    // } else {
    //     document.documentElement.style.setProperty('--martop', '35px');
    // }
};
const $lang = getQueryObj(location.href).Lang;
const title = ref<any>(0);
const activeIndex = ref('0');
const handleSelect = (key: number, keyPath: string[]) => {
    title.value = key;
    emit('select', key);
    //toggleDark()
};
// const splitTtile = (title: any) => {
//      if ($lang == "zh-HK" || $lang == "zh-CN") {
//         var re = /^.*?\(/g;
//     var encode = title.match(re)[0];
//     let v = encode.substring(0, encode.length - 1);

//     var re2 = /\(.*/g;
//     var encode2 = title.match(re2)[0];
//     let v2 = encode2.substring(0, encode2.length);

//     return [v, v2]
// } else  {
//   return
// }

// }

watch(title, () => {
    isShow.value = !isShow.value;
});
defineExpose({
    isShow,
});
</script>

<style lang="less" scoped>
.header {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span,
    .font {
        font-size: 17px;
        color: var(--titlecolor);
        font-weight: 700;
    }
}

.menu {
    width: 100%;
}

.iconColor {
    color: var(--arrowColor) !important;
}
</style>
<style>
.el-popper {
    margin-top: var(--martop);
}

.is-active.el-menu-item {
    color: var(--titlecolor) !important;
}

.el-menu--popup {
    width: 100vw;
    background-color: var(--menupopbg);
    transform: translateY(-6px);
}

.el-menu-item:hover {
    background-color: rgb(151, 217, 173) !important;
    color: var(--tablecontentcolor) !important;
}

.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-sub-menu__title {
    background-color: var(--menupopbg);
    color: var(--tablecontentcolor);
}

.el-menu--horizontal {
    border-bottom: black !important;
    background-color: var(--menubackgroundcolor);
}

.el-popper.is-light {
    border: var(--menupopbg);
}
.el-sub-menu{
    width: 100vw;
}
.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title{
  
    color: var(--titlecolor);
    border-bottom: none;
    background-color: var(--menubackgroundcolor);
    font-weight: bold;
}
</style>
